<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/reset.css">
    <title>Title</title>
</head>
<style>
    .nav{
        width: 1210px;
        height: 48px;
        line-height: 48px;
        margin: 50px auto;
        background-color: #e8e7e3;
        display: flex;
        text-align: center;
    }
    .nav li{
        flex-grow: 1;
    }
    .nav a{
        display: block;
        color: #808080;
        text-decoration: none;
        font-size: 16px;

    }
    .nav a:hover{
        background-color: #636363;
    }
</style>
<body>
<ul class="nav">
    <li>
        <a href="#">HTML/CSS</a>
    </li>
    <li>
        <a href="#">Browser Side</a>
    </li>
    <li>
        <a href="#">Server Side</a>
    </li>
    <li>
        <a href="#">XML</a>
    </li>
    <li>
        <a href="#">Programming</a>
    </li>
    <li>
        <a href="#">Web Building</a>
    </li>
    <li>
        <a href="#">Reference</a>
    </li>
</ul>
</body>
</html>
